<template>
	<view class="virtualList">
		<view class="placehold" :style="{height:listhigh+'px'}"></view>
			<view class="row">
				<text class="col1">股票名称</text>
				<text class="col2">最新价</text>
				<text class="col2">涨跌幅</text>
			</view>
		<view class="main" :style="{transform:GetOffsetY}" >
			<Item ref="hot" v-for="(item,index) in visibleData" :item="item" :index="index"></Item>
		</view>
	</view>
</template>

<script>
	import Item from './item.vue'
	import { data } from '../../util/MockStockData.js'
	export default {
		name: 'virtualList',
		components: { Item },
		computed: {
			visibleData() {
				let start = this.start - this.prevCount,
					end = this.end + this.nextCount;
				console.log( '78xj', start, end, 'benlai==', this.start, this.end )
				return this.data.slice(this.start, Math.min(this.end, this.data.length))
			},
			prevCount() {
				return Math.min(this.start, this.visibleCount);
			},
			nextCount() {
				return Math.min(this.visibleCount, this.data.length - this.end);
			},
			visibleCount() {
			    return Math.ceil(this.screenHeight / this.boxhigh)
			},
			listhigh() {
				return this.data.length * this.boxhigh;
			},
			GetOffsetY() {
				return `translate3d(0px,${this.offsetY}px,0px)`;
			}
		},
		data() {
			return {
				start: 0,
				end: 10,
				boxhigh: 0,
				screenHeight: 0,
				data: data(),
				offsetY: 0
			}
		},
		async onShow() {
			this.$refs.hot[0].ChangleBoxHigh( res => {
				if ( !res ) return
				this.screenHeight = res[1].scrollHeight;
				this.boxhigh = res[0].height;
				this.end = this.visibleCount;
			})
		},
		onPageScroll(e) {
			let { scrollTop } = e;
			this.start = Math.floor(scrollTop / this.boxhigh);
			this.end = this.start + this.visibleCount;
			this.offsetY = this.start * this.boxhigh; 
		}
	}
</script>

<style lang="scss" scoped >
	.virtualList {
		.placehold {
			position: absolute;
			left: 0;
			right: 0;
		}
		.row {
			padding: 0 32rpx;
			font-size: 32rpx;
			background: white;
			.col1 {
				display: inline-block;
				width: 160rpx;
			}
			.col2 {
				display: inline-block;
				width: 180rpx;
				text-align: right;
			}
		}
		.main {
			padding: 28rpx 32rpx 0;
		}
	}
</style>
